<!--
 * @Author: your name
 * @Date: 2021-03-30 16:15:50
 * @LastEditTime: 2021-03-30 17:00:23
 * @LastEditors: Please set LastEditors
 * @Description: 分页
 * @FilePath: /medicine-web/src/components/Pagation/index.vue
-->
<template>
  <div class="pagation-container">
    <!-- <a-icon type="left" @click="onChange(current - 1)" /> -->
    <img :src="require('@/assets/image/arrowLeft.png')" alt="" @click="onChange(current - 1)" style="width: 6px; height: 10px; margin-right: 8px; cursor: pointer;">
    <span>{{current}}/{{Math.ceil(total / 10)}}</span>
    <!-- <a-icon type="right" @click="onChange(current + 1)" /> -->
    <img :src="require('@/assets/image/arrowRight.png')" alt="" @click="onChange(current + 1)" style="width: 6px; height: 10px; margin-left: 8px; cursor: pointer;">
    <!-- <a-pagination v-model="current" :total="total" :item-render="itemRender" @change="onChange"/> -->
  </div>
</template>
<script>
export default {
  name: 'Pagation',
  data () {
    return {
      isDisabled: false
    }
  },
  computed: {
    current: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  props: {
    total: {
      type: Number,
      default: 200
    },
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    // itemRender(current, type, originalElement) {
    //   if (type === 'prev') {
    //     return <span></span>
    //   } else if (type === 'next') {
    //     return <span></span>
    //   }
    //   return originalElement
    // },
    onChange (pageNumber) {
      if (pageNumber === 0) {
        return
      }
      if (pageNumber >= Math.ceil(this.total / 10) + 1) {
        return
      }
      this.$emit('handlePage', pageNumber)
    }
  },
}
</script>
<style lang="scss" scoped>
.pagation-container {
  text-align: center;
  span {
    color: #1E5191;
    font-size: 12px;
  }
}
</style>